<template>
  <div>
    <!-- 顶部标题与图片 -->
    <div class="top-image fullscreen-top"></div>
    <div class="list">
      <div class="item">
        <span class="item-text">机构部门</span>
        <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
      </div>
    </div>
  </div>

  <PageNav :navList="navList" />
  <TitleBox title="机构部门" subtitle="ORGANIZATIONAL DEPARTMENTS" />
  <!-- 管理体系 -->
  <section class="info-section">
    <div class="section-header">
      <div class="section-line"></div>
      <h2>管理体系</h2>
    </div>

    <div class="section-content grid-layout">
      <div v-for="item in systemData" :key="item.label" class="info-card">
        <div class="info-text">
          <h3>{{ item.label }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 部门设置 -->
  <section class="info-section">
    <div class="section-header">
      <div class="section-line"></div>
      <h2>部门设置</h2>
    </div>

    <div v-loading="loading" class="section-content grid-layout">
      <div v-for="item in dept" :key="item.departmentId" class="info-card">
        <div class="info-text">
          <h3>{{ item.departmentName }}</h3>
          <p>{{ item.description || '暂无部门简介' }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系方式 -->
  <section class="info-section">
    <div class="section-header">
      <div class="section-line"></div>
      <h2>联系方式</h2>
    </div>
    <div class="contact-grid">
      <div class="contact-item">
        <div class="contact-label">地址</div>
        <div class="contact-value">陕西省西安市咸宁西路28号</div>
      </div>
      <div class="contact-item">
        <div class="contact-label">邮编</div>
        <div class="contact-value">710049</div>
      </div>
      <div class="contact-item">
        <div class="contact-label">成立时间</div>
        <div class="contact-value">2025年7月1日</div>
      </div>
      <div class="contact-item">
        <div class="contact-label">电话</div>
        <div class="contact-value">15911056725</div>
      </div>
      <div class="contact-item">
        <div class="contact-label">传真</div>
        <div class="contact-value">029-82668382</div>
      </div>
      <div class="contact-item">
        <div class="contact-label">邮箱</div>
        <div class="contact-value">sunshaolong@xjtu.edu.cn</div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { listDepartment } from '../../api/departmentSys/department'
import PageNav from "@/components/views/PageNav.vue"
import TitleBox from "@/components/common/TitleBox.vue"
const dept = ref([])
const loading = ref(false)

const navList = [
  { label: "机构部门", path: "/support/organizationalStructure" },
  { label: "科研团队", path: "/support/talentExpertTeam" },
  { label: "支撑保障", path: "/support/resourceSupport" }
]

const systemData = ref([
  {
    label: '管理模式',
    desc: '依托单位领导下的主任负责制'
  },
  {
    label: '决策机构',
    desc: '中心理事会（由依托与共建单位负责人组成）'
  },
  {
    label: '指导机构',
    desc: '专家委员会（提供技术指导与成果评价）'
  }
])

const fetchDept = async () => {
  loading.value = true
  try {
    const res = await listDepartment({})
    if (res.code === 200 && res.rows) {
      dept.value = res.rows
    } else {
      ElMessage.error('获取部门数据失败')
      dept.value = []
    }
  } catch (error) {
    console.error('获取部门列表出错:', error)
    ElMessage.error('网络请求异常，请稍后重试')
    dept.value = []
  } finally {
    loading.value = false
  }
}

onMounted(fetchDept)
</script>

<style scoped>
/* 顶部图片与标题条保持原样 */
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}
.list {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 0;
}
.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 90px;
  background-color: #eae4e4;
  z-index: 0;
}
.list .item {
  position: relative;
  display: inline-block;
  margin-top: -30px;
  z-index: 1;
}
.list .item-icon {
  display: block;
  position: relative;
  z-index: 1;
}
.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2;
}

/* 红色竖条标题 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.section-line {
  width: 6px;
  height: 28px;
  background-color: #c8102e;
  border-radius: 3px;
  margin-right: 12px;
}
.section-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #b71c1c;
}

/* 信息区块 */
.info-section {
  margin: 60px auto;
  max-width: 1200px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(183, 28, 28, 0.12);
  padding: 40px 50px;
  border-top: 4px solid #c8102e;
}

/* 网格布局 */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 24px;
}

/* 信息卡片 */
.info-card {
  background-color: #fffafa;
  border: 1px solid #f4c2c2;
  border-radius: 14px;
  padding: 20px 24px;
  transition: all 0.3s ease;
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(198, 40, 40, 0.15);
}
.info-text h3 {
  font-size: 16px;
  color: #b71c1c;
  font-weight: 600;
  margin-bottom: 6px;
}
.info-text p {
  font-size: 14px;
  color: #5d4037;
  line-height: 1.6;
}

/* 联系方式 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.contact-item {
  background-color: #fffafa;
  border: 1px solid #f4c2c2;
  border-radius: 12px;
  padding: 16px 20px;
  transition: all 0.3s ease;
}
.contact-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(198, 40, 40, 0.15);
}
.contact-label {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
}
.contact-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
</style>
